---
title: Scroll Area
description: Displays an 8-bit scroll area component.
---

import { ScrollArea } from "@/components/ui/8bit/scroll-area";
import CopyCommandButton from "@/components/copy-command-button";
import InstallationCommands from "@/components/installation-commands";
import ComponentPreview from "@/components/component-preview";

<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
  <CopyCommandButton
    copyCommand="pnpm dlx shadcn@latest add @8bitcn/scroll-area"
    command="pnpm dlx shadcn@latest add @8bitcn/scroll-area"
  />
</div>

<ComponentPreview title="8-bit Scroll Area component" name="scroll-area">
  <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
    Jokester began sneaking into the castle in the middle of the night and leaving
    jokes all over the place: under the king&apos;s pillow, in his soup, even in the
    royal toilet. The king was furious, but he couldn&apos;t seem to stop Jokester. And
    then, one day, the people of the kingdom discovered that the jokes left by
    Jokester were so funny that they couldn&apos;t help but laugh. And once they
    started laughing, they couldn&apos;t stop.
  </ScrollArea>
</ComponentPreview>

## Installation

---

<InstallationCommands packageName="scroll-area" />

## Usage

---

```tsx
import { ScrollArea } from "@/components/ui/scroll-area"
```

```tsx
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  Jokester began sneaking into the castle in the middle of the night and leaving
  jokes all over the place: under the king's pillow, in his soup, even in the
  royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
  then, one day, the people of the kingdom discovered that the jokes left by
  Jokester were so funny that they couldn't help but laugh. And once they
  started laughing, they couldn't stop.
</ScrollArea>
```

